<template>
  <div>
    <el-button  type="primary" v-if="!isExpand" @click="expand" >展开</el-button>
    <el-button  type="info"  v-if="isExpand"  @click="expand" >收起</el-button>
    <el-tree :data="data"
             show-checkbox
             @check-change ="checkChange"
             node-key="id"
             :default-expanded-keys="expandedKeys"

             v-if="isShow"
             :default-expand-all="isExpand"

             :props="defaultProps"
             @node-click="handleNodeClick">

        <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span  style="margin-left: 10px">
          <el-button
            v-if="node.level<5"
            type="success" icon="el-icon-plus" circle
            size="mini"
            @click="() => append(node, data)">

          </el-button>
          <el-button
            v-if="node.level!=1"
            type="warning"  icon="el-icon-edit" circle
            size="mini"
            @click="() => edit(node, data)">
          </el-button>
          <el-button
            v-if ="node.childNodes.length==0"
            type="danger" icon="el-icon-delete" circle
            size="mini"
            @click="() => remove(node, data)">
          </el-button>
        </span>
      </span>

    </el-tree>
  </div>
</template>
<script>
import { getTreeData , deleteNode} from "@/api/webshop/BaseArea";
export default {
  name: "Tree",
  data() {
    return {
      isShow : true,
      isExpand : false,
      data: [],
      expandedKeys:[ 7,9 ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  created() {

    this.getData()
  },
  methods: {
    expand(){
      this.isShow = false
      this.isExpand = !this.isExpand

      this.$nextTick(()=>{
        this.isShow = true
      })


    },
    getData() {
      getTreeData().then(resp => {
        this.data = resp.data
      })
    },
    handleNodeClick(data, node, component) {
      console.log(data, node, component);
    },

    append(node, data){
      console.log(node,data)
    },
    edit(node, data){
      console.log(node,data)
    },
    checkChange(node, data){

    },
    remove(node, data){
      console.log(node,data)
      this.$modal.confirm('确认要删除信息吗?').then(function() {
        // 我要干什么
        return deleteNode(data.id)

      }).then((resp) => {
        // 成功了 回调
        console.log(resp)
        if (resp.code == 200) {
          this.$modal.msgSuccess("删除成功");
          this.getData();
          this.expandedKeys = [ node.parent.data.id ]
        }
      }).catch(() => {});

    },
  },

}
</script>


<style scoped lang="scss">

</style>
